<template>
	<div class="box">
		<el-card class="card-css">
			<div class="zhpj">
				<span class="zhpj-span">工单配置</span>
			</div>

			<div class="table-css">
				<div>
					<span>不经确认，直接发出</span
					><el-switch v-model="value1" class="switch-css" />
				</div>
				<div class="biaotou-css">
					

					<div class="select02">
						<el-select placeholder="能效">
							<el-option label="Zone one" value="shanghai" />
							<el-option label="Zone two" value="beijing" />
						</el-select>
					</div>

					<div class="block">
						<el-date-picker
							type="daterange"
							range-separator="至"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
						/>
					</div>

					<div class="btn-01">
						<el-button type="primary">下 载</el-button>
					</div>
					<div class="btn-02">
						<el-button type="primary">打 印</el-button>
					</div>
				</div>
			</div>

			<div class="table">
				<el-table
					:data="tableData"
					stripe
					style="width: 100%"
					:header-cell-style="{
						'text-align': 'center',
						background: '#B4C7E7',
						color: '#333333',
					}"
					:cell-style="{
						'text-align': 'center',
						background: '#f5f8fb',
					}"
				>
					<el-table-column prop="date" label="确认发出" />
					<el-table-column prop="name" label="触发" />
					<el-table-column prop="address" label="预计完成" />
					<el-table-column prop="address" label="问题描述" />
					<el-table-column prop="address" label="可能原因" />
					<el-table-column prop="address" label="友情提示" />
					<el-table-column
						prop="10"
						label="紧急类别"
						:filters="[
							{ text: '能效', value: 0 },
							{ text: '舒适', value: 1 },
							{ text: '安全', value: 2 },
							{ text: '所有', value: 3 },
						]"
						:filter-method="filterTag"
						width="90px"
						align="center"
					/>
					<el-table-column
						prop="10"
						label="工单类别"
						:filters="[
							{ text: '能效', value: 0 },
							{ text: '舒适', value: 1 },
							{ text: '安全', value: 2 },
							{ text: '所有', value: 3 },
						]"
						:filter-method="filterTag"
						width="90px"
						align="center"
					/>
					<el-table-column
						prop="10"
						label="影响氛围"
						:filters="[
							{ text: '能效', value: 0 },
							{ text: '舒适', value: 1 },
							{ text: '安全', value: 2 },
							{ text: '所有', value: 3 },
						]"
						:filter-method="filterTag"
						width="90px"
						align="center"
					/>
					<el-table-column
						prop="10"
						label="风险"
						:filters="[
							{ text: '能效', value: 0 },
							{ text: '舒适', value: 1 },
							{ text: '安全', value: 2 },
							{ text: '所有', value: 3 },
						]"
						:filter-method="filterTag"
						width="90px"
						align="center"
					/>
					<el-table-column
						prop="10"
						label="涉及设备/系统"
						:filters="[
							{ text: '能效', value: 0 },
							{ text: '舒适', value: 1 },
							{ text: '安全', value: 2 },
							{ text: '所有', value: 3 },
						]"
						:filter-method="filterTag"
						width="90px"
						align="center"
					/>
					<el-table-column prop="address" label="操作指令" />
					<el-table-column
						prop="10"
						label="执行人员姓名"
						:filters="[
							{ text: '能效', value: 0 },
							{ text: '舒适', value: 1 },
							{ text: '安全', value: 2 },
							{ text: '所有', value: 3 },
						]"
						:filter-method="filterTag"
						width="90px"
						align="center"
					/>
					<el-table-column
						prop="10"
						label="发出情况"
						:filters="[
							{ text: '能效', value: 0 },
							{ text: '舒适', value: 1 },
							{ text: '安全', value: 2 },
							{ text: '所有', value: 3 },
						]"
						:filter-method="filterTag"
						width="90px"
						align="center"
					/>
					<el-table-column prop="address" label="详情查看" />
				</el-table>
			</div>
			<div class="pagination">
				<el-pagination
					v-model:page-size="pageSize3"
					layout="prev, pager, next, jumper"
					:total="1000"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</el-card>
	</div>
</template>

<script setup>
import { ref } from "vue";

const value1 = ref(true);

const tableData = ref([
	{
		date: "2016-05-03",
		name: "Tom",
		address: "No. 189, Grove St, Los Angeles",
	},
	{
		date: "2016-05-02",
		name: "Tom",
		address: "No. 189, Grove St, Los Angeles",
	},
	{
		date: "2016-05-04",
		name: "Tom",
		address: "No. 189, Grove St, Los Angeles",
	},
	{
		date: "2016-05-01",
		name: "Tom",
		address: "No. 189, Grove St, Los Angeles",
	},
]);
</script>

<style lang="less" scoped>
.box {
	display: flex;
	.card-css {
		flex: 1;
		width: 1760px;
		height: 817px;
		position: relative;
		.pagination {
			display: flex;
			justify-content: flex-end;
		}
	}
	.zhpj {
		position: absolute;
		border-bottom: 1px solid #d9deec;
		margin-right: 120px;
		margin-left: -20px;
		padding-left: 20px;
		padding-bottom: 20px;
		width: 100%;
		.zhpj-span {
			font-family: SourceHanSansSC-medium;
			font-weight: 700;
			color: #4d62a5;
			font-size: 20px;
		}
	}
	.table-css {
		display: flex;
		margin-top: 66px;
		justify-content: space-between;
		.switch-css {
			color: #8faadc;
			margin-left: 10px;
		}
		:deep(.el-switch.is-checked .el-switch__core) {
			background-color: #8faadc;
			border-color: #8faadc;
		}
		.biaotou-css {
			display: flex;
			.select01 {
				width: 100px;
			}
			.select02 {
				width: 100px;
				margin-right: 20px;
				margin-left: 20px;
			}
			.btn-01 {
				margin-left: 20px;
				margin-right: 20px;
			}
			.el-button {
				background-color: #8faadc;
				border-color: #8faadc;
			}
			.btn-css {
				flex-grow: 1;
			}
		}
	}
	.table {
		margin-top: 20px;
	}
}
</style>
